Drilldown চার্ট হলো এমন একটি চার্ট যা ব্যবহারকারীকে একটি নির্দিষ্ট ডেটার বিস্তারিত দেখানোর সুযোগ দেয়। Highcharts এ Drilldown ফিচার ব্যবহার করে, আপনি একটি চার্টে ক্লিক করলে আরও ডিটেইলড ডেটা দেখতে পারবেন। এটি সাধারণত পিতামাতার তথ্য থেকে শিশু তথ্যের দিকে গভীরতা অনুসন্ধান করতে ব্যবহৃত হয়। অর্থাৎ, ব্যবহারকারী একটি নির্দিষ্ট কেটেগরি বা সেগমেন্টে ক্লিক করার মাধ্যমে আরও বিস্তারিত তথ্য দেখতে পারে।
Drilldown চার্টে একাধিক স্তর থাকতে পারে, এবং এক স্তরের ডেটা আরেক স্তরের ডেটার উপর ভিত্তি করে পরিবর্তিত হতে পারে। Drilldown এর জন্য সাধারণভাবে series এবং drilldown অপশন ব্যবহার করা হয়।
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'বিক্রয় বিশ্লেষণ - Drilldown চার্ট'
},
subtitle: {
text: 'ক্লিক করে বিস্তারিত দেখুন'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'বিক্রয় পরিমাণ'
}
},
series: [{
name: 'মাস',
data: [{
name: 'জানুয়ারি',
y: 5,
drilldown: 'jan-drilldown'
}, {
name: 'ফেব্রুয়ারি',
y: 3,
drilldown: 'feb-drilldown'
}, {
name: 'মার্চ',
y: 4,
drilldown: 'mar-drilldown'
}]
}],
drilldown: {
series: [{
id: 'jan-drilldown',
data: [
['প্রোডাক্ট A', 2],
['প্রোডাক্ট B', 3]
]
}, {
id: 'feb-drilldown',
data: [
['প্রোডাক্ট A', 1],
['প্রোডাক্ট B', 2]
]
}, {
id: 'mar-drilldown',
data: [
['প্রোডাক্ট A', 2],
['প্রোডাক্ট B', 2]
]
}]
}
});
series
:drilldown
:id
ব্যবহার করে Drilldown সিরিজের জন্য একটি ইউনিক আইডি সেট করেন, যা মূল ডেটা পয়েন্টের সাথে ম্যাচ করবে।drilldown
ID এর সাথে সম্পর্কিত ডেটা প্রদর্শিত হবে।Highcharts এর Drilldown ফিচারে সাধারণত ডিফল্টভাবে "Back to Top" ফিচার থাকে। অর্থাৎ, আপনি যখন Drilldown থেকে পিতামাতা চার্টে ফিরে যেতে চান, তখন "Back to Top" বাটন ব্যবহার করে সহজেই মূল চার্টে ফিরে আসতে পারেন।
আপনি Drilldown চার্টের সাইজ, রঙ, স্টাইল এবং আরও অনেক কিছু কাস্টমাইজ করতে পারবেন। উদাহরণস্বরূপ:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'বিক্রয় বিশ্লেষণ'
},
series: [{
name: 'মাস',
data: [{
name: 'জানুয়ারি',
y: 5,
drilldown: 'jan-drilldown'
}, {
name: 'ফেব্রুয়ারি',
y: 3,
drilldown: 'feb-drilldown'
}]
}],
drilldown: {
series: [{
id: 'jan-drilldown',
data: [
['প্রোডাক্ট A', 2],
['প্রোডাক্ট B', 3]
],
color: '#ff0000' // Drilldown সিরিজের রঙ কাস্টমাইজ করা
}, {
id: 'feb-drilldown',
data: [
['প্রোডাক্ট A', 1],
['প্রোডাক্ট B', 2]
],
color: '#00ff00' // Drilldown সিরিজের রঙ কাস্টমাইজ করা
}]
}
});
এতে আপনি Drilldown সিরিজের color বা রঙ কাস্টমাইজ করে আরো আকর্ষণীয় ডিজাইন করতে পারবেন।
Highcharts এর Drilldown ফিচার ব্যবহার করে আপনি ইন্টারঅ্যাকটিভ এবং ডিটেইলড ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন। এটি ব্যবহারকারীদের একটি নির্দিষ্ট ডেটা পয়েন্টে ক্লিক করে আরও বিস্তারিত ডেটা দেখতে সাহায্য করে, এবং একাধিক স্তরের তথ্য প্রদর্শন করার জন্য খুবই উপকারী। Drilldown চার্টের মাধ্যমে, আপনি জটিল ডেটাকে সহজে এবং সুন্দরভাবে উপস্থাপন করতে পারেন।
Read more